<template>
    <div class="app-container">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="名字">
            </el-table-column>
            <el-table-column prop="role_permission" label="权限">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                    </el-row>
                    <el-row>
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :fullscreen="true" :visible.sync="dialogVisible" title="编辑" :close-on-click-modal="false">
            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="80px">
                <el-form-item label="名字" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="权限" prop="role_permission">
                    <el-input v-model="editForm.role_permission"></el-input>
                </el-form-item>

                <el-row :gutter="24">
                    <el-col :span="6" v-for="item in permission_list" style="margin-top: 10pt;">
                        <el-checkbox :label="item.title" v-model="item.is_permission" @change="onChangePermission"></el-checkbox>
                    </el-col>
                </el-row>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveEdit">保存</el-button>
            </div>
        </el-dialog>

        <el-dialog :fullscreen="true" :visible.sync="addDialogVisible" title="添加新角色" :close-on-click-modal="false">
            <el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="80px">
                <el-form-item label="名字" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="权限" prop="role_permission">
                    <el-input v-model="addForm.role_permission"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveAdd">添加</el-button>
            </div>
        </el-dialog>
        <el-button style="margin-top: 20px;" type="primary" @click="addDialogVisible = true">添加新角色</el-button>

    </div>
</template>

<script>
import Api from '../../api/api'
export default {
    data() {
        return {
            tableData: [],
            permission_list: [
            {
					title: '报修',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '待指派',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '待接单',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '维修中',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '人员管理',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '物料管理',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '客户管理',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: 'Gel卡管理',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '角色管理',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '修改工单',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '删除工单',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '指派任务',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '工单任务',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '完成信息',
                    role_permission: 0,
                    is_permission: false
				},
				{
					title: '审核任务',
                    role_permission: 0,
                    is_permission: false
				}
            ],
            dialogVisible: false,
            addDialogVisible: false,
            editFormIndex: 0,
            tempForm: {
                name: '',
                role_permission: 0
            },
            editForm: {
                name: '',
                role_permission: 0
            },
            addForm: {
                name: '',
                role_permission: 0
            },
            editFormRules: {
                name: [{
                    required: true,
                    message: '请输入名字',
                    trigger: 'blur'
                }],
                role_permission: [{
                    required: true,
                    message: '请输入权限',
                    trigger: 'blur'
                }],
            },
            addFormRules: {
                name: [{
                    required: true,
                    message: '请输入名字',
                    trigger: 'blur'
                }],
                role_permission: [{
                    required: true,
                    message: '请输入权限',
                    trigger: 'blur'
                }],
            }
        };
    },
    methods: {
        onLoad() {
            Api.getRoles().then(response => {
                this.tableData = response.data.data
                console.log(response.data)
            })
        },
        handleEdit(index, row) {
            this.editForm = Object.assign({}, row);
            this.editFormIndex = index;
            this.dialogVisible = true;
            for (let i = 0; i < this.permission_list.length; i++) {
                this.permission_list[i].is_permission = (this.editForm.role_permission&(0x800000 >> i))!=0
                console.log( this.permission_list[i].is_permission )
            }
        },
        saveEdit() {
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    console.log(this.editForm)
                    console.log(this.editFormIndex)
                    console.log(this.tableData[this.editFormIndex])
                    let date = this.tableData[this.editFormIndex]
                    Api.updaRoles({ id: date._id, date: this.editForm }).then(response => {
                        console.log(response.data)
                        if (response.status == 200) {
                            Object.assign(this.tableData[this.editFormIndex], this.editForm);
                            this.dialogVisible = false;
                        }
                        this.$message.success(response.data.message);
                    })
                }
            });
        },
        handleDelete(index) {
            this.$confirm('确认删除此角色？')
                .then(_ => {
                    let date = this.tableData[index]
                    console.log(date)
                    Api.delRoles({ id: date._id }).then(response => {
                        console.log(response.data)
                        if (response.status == 200) {
                            this.tableData.splice(index, 1);

                        }
                        this.$message.success(response.data.message);
                    })

                })
                .catch(_ => { });
        },
        saveAdd() {
            this.$refs.addForm.validate(valid => {
                if (valid) {
                    Api.createRole(this.addForm).then(response => {
                        console.log(response.data)
                        if (response.status == 200) {
                            this.tableData.push({ ...response.data.data });
                            this.addForm = { ...response.data.data }
                            delete this.addForm._id
                            this.addDialogVisible = false;

                        }
                        this.$message.success(response.data.message);

                    })

                }
            });
        }, 
        onChangePermission(date) {
            this.editForm.role_permission = 0x00
            for (let i = 0; i < this.permission_list.length; i++) {
                this.permission_list[i].role_permission = 0x800000 >> i
                if(this.permission_list[i].is_permission)
                this.editForm.role_permission = this.editForm.role_permission | this.permission_list[i].role_permission
            }
        }
    }
};
</script>
<style>
.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
</style>
